<!--
发送xml数据到后端，后端通过thymeleaf渲染html后返回给前端
-->
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <title>发送 XML 数据到后端</title>
    <meta charset="UTF-8">
</head>
<body>
<h1>发送 XML 数据到后端</h1>
<form id="xmlForm">
    <label>姓名：</label>
    <input type="text" name="name" id="name" required><br>
    <label>年龄：</label>
    <input type="number" name="age" id="age" required><br>
    <button type="submit">提交</button>
</form>

<script>
    document.getElementById('xmlForm').addEventListener('submit', function (event) {
        event.preventDefault(); // 阻止默认的表单提交

        // 获取表单数据
        const name = document.getElementById('name').value;
        const age = document.getElementById('age').value;

        // 构造 XML 数据
        //这是js中模版字符串的特性，与thymeleaf和freemarker无关
        const xmlData = `
                <person>
                    <name>${name}</name>
                    <age>${age}</age>
                </person>
            `;

        // 使用 fetch API 发送请求
        fetch('/processXml', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/xml', // 声明数据格式为 XML
            },
            body: xmlData,
        })
            .then(response => response.text())
            .then(html => {
                // console.log('服务器返回:', data);
                // alert('数据已发送，服务器返回：' + data);
                document.body.innerHTML = html;
            })
            .catch(error => {
                console.error('发送失败:', error);
                alert('发送失败，请检查控制台错误信息。');
            });
    });
</script>
</body>
</html>